---
title: Next.js
description: Next.js-kohtaiset linttaussäännöt Ultracitea varten.
---

Next.js-konfiguraatio sisältää Next.js-kohtaisia linttaussääntöjä kuvan optimointiin, dokumentin rakenteeseen ja App Router -malleihin.

## Asennus

Lisää Next.js-konfiguraatio `biome.jsonc`-tiedostoosi:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Yleiskatsaus

Tämä konfiguraatio lisää Next.js-kehitykseen liittyviä sääntöjä:

- **Kuvien optimointi**: Pakottaa käyttämään Next.jsin `<Image>`-komponenttia
- **Dokumentin rakenne**: Estää Next.js:n erityiskomponenttien virheellistä käyttöä
- **Client-komponentit**: Varmistaa, että asynkroniset client-komponentit käsitellään oikein
- **Konfiguraatiotiedostot**: Erityiskäsittely `next.config.*`-tiedostoille

## Next.js-kohtaiset säännöt

### Alku

| Sääntö | Asetus | Kuvaus |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Estä asynkroniset client-komponentit Next.js:ssä. Client-komponenttien tulisi olla synkronisia; käytä palvelinkomponentteja asynkronisiin operaatioihin. |

### Suorituskyky

| Sääntö | Asetus | Kuvaus |
|------|---------|-------------|
| `noImgElement` | `error` | Estä `<img>`-HTML-elementin käyttö. Käytä sen sijaan Next.js:n `<Image>`-komponenttia automaattiseen kuvan optimointiin. |

### Tyyli

| Sääntö | Asetus | Kuvaus |
|------|---------|-------------|
| `noHeadElement` | `error` | Estä `<head>`-HTML-elementin käyttö. Käytä sen sijaan Next.js:n `next/head`-moduulia tai App Routerin metadata-APIa. |

### Epäilyttävät

| Sääntö | Asetus | Kuvaus |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Estä `next/document`-tuonti sivutiedostoissa. `_document.tsx`-tiedoston tulisi olla olemassa vain polussa `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Estä `next/head`-tuonti `_document.tsx`-tiedostossa. Käytä sen sijaan `<Head>`-komponenttia `next/document`-moduulista. |

## Konfiguraatiotiedostojen ylikirjoitukset

Next.js-esiasetus sisältää erityiskäsittelyn konfiguraatiotiedostoille ja App Router -komponenteille:

### Next.js:n konfiguraatiotiedostot

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Tämä mahdollistaa Next.js-konfiguraatiomallit, jotka eivät tavallisesti läpäise linttaussääntöjä.

### App Router -sivut ja -asettelut

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Routerin sivu- ja asettelukomponentit voivat olla asynkronisia ilman `await`-vaatimusta, koska Next.js käsittelee nämä erikoisesti palvelinpuolen renderöintiä ja datan hakua varten.